<template>
  <q-layout view="hhh lpR lFf">

    <q-header elevated class="tw-bg-slate-900 text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
        <q-toolbar-title>
          在线算法演示平台
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen"  class="tw-bg-slate-900 tw-text-zinc-50	" side="left" bordered>
      <q-scroll-area class="fit">
        <q-list class="tw-m-3">
          <q-expansion-item default-opened  label="算法模块"  align="left" caption="不同模型">
            <q-list class="tw-pl-3">
              <q-item clickable to="/model/triformer">Triformer</q-item>
              <q-item clickable >model B</q-item>
            </q-list>
          </q-expansion-item>
          <q-separator />
          <q-expansion-item default-opened label="数据模块"  align="left" caption="上传数据集">
            <q-list class="tw-pl-3">
              <q-item clickable>Dataset A</q-item>
              <q-item clickable>Dataset B</q-item>
              <q-item clickable>Custom your own dataset</q-item>
            </q-list>
          </q-expansion-item>
          <q-separator />
          <q-expansion-item default-opened  label="可视化模块"  align="left" caption="图表集">
            <q-list class="tw-pl-3">
              <q-item clickable to="/mapping">Chart A</q-item>
              <q-item clickable>Chart B</q-item>
            </q-list>
          </q-expansion-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
import { ref } from 'vue'
import {outlinedArrowDropDown} from "@quasar/extras/material-icons-outlined";

export default {
  setup () {
    const leftDrawerOpen = ref(false)

    return {
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
}
</script>
